<template>
    <div class="container mt-5">
      <form action="" class="mb-4">
        <div class="mb-3">
          <input type="text" v-model="type_item.name" placeholder="类型名" class="form-control">
        </div>
        <div class="mb-3">
          <input type="text" v-model="type_item.code" placeholder="类型码" class="form-control">
        </div>
        <button @click.prevent="add_type" class="btn btn-primary">添加</button>
      </form>
  
      <button @click="get_douban_movies" class="btn btn-success mb-4">获取豆瓣电影</button>
  
      <!-- Toast 组件 -->
      <div class="toast-container position-fixed bottom-0 end-0 p-3">
        <div id="successToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
          <div class="toast-header">
            <strong class="me-auto">成功</strong>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div class="toast-body">
            添加成功！
          </div>
        </div>
      </div>
  
      <!-- 查询电影标题的表单 -->
      <div class="mb-4">
        <div class="input-group">
          <input type="text" v-model="query_n" placeholder="请输入 n 的值" class="form-control">
          <button @click="query_movies_by_n" class="btn btn-warning">查询电影标题</button>
        </div>
      </div>
  
      <!-- 电影标题列表 -->
      <div v-if="titles_data.length > 0" class="mb-4">
        <h3>电影标题列表</h3>
        <div class="row">
          <div class="col-md-4 mb-4" v-for="(title, index) in titles_data" :key="index">
            <div class="card glass-card">
              <div class="card-body">
                <h5 class="card-title">{{ title.TITLE }}</h5>
                <p class="card-text">评分：{{ title.SCORE }}</p>
                <p class="card-text">票房：{{ title.BOXOFFICE }}</p>
                <a :href="title.URL" target="_blank" class="btn btn-info">豆瓣链接</a>
              </div>
            </div>
          </div>
        </div>
      </div>
  
      <!-- 豆瓣电影列表 -->
      <div v-if="movies_data.length > 0" class="mb-4">
        <h3>豆瓣电影列表</h3>
        <div class="row">
          <div class="col-md-4 mb-4" v-for="(item, index) in movies_data" :key="index">
            <div class="card glass-card">
              <div class="card-body">
                <h5 class="card-title">{{ item.TITLE }}</h5>
                <p class="card-text">评分：{{ item.SCORE }}</p>
                <p class="card-text">票房：{{ item.BOXOFFICE }}</p>
                <a :href="item.URL" target="_blank" class="btn btn-info">豆瓣链接</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, onMounted } from 'vue'
  import axios from 'axios'
  import { Toast } from 'bootstrap' // 引入 Bootstrap 的 Toast
  
  // 初始化 movies_data 为空数组
  const movies_data = ref([])
  
  // 初始化 type_item 对象
  const type_item = reactive({ code: '', name: '' })
  
  // 查询 n 的值
  const query_n = ref('')
  
  // 电影标题列表
  const titles_data = ref([])
  
  // 获取豆瓣电影数据
  const get_douban_movies = function () {
    const url = 'http://127.0.0.1:8000/api/douban_n?n=1000'
    axios.get(url).then(res => {
      // 确保返回的数据是数组格式
      if (Array.isArray(res.data.data)) {
        movies_data.value = res.data.data
      } else {
        console.error('返回的数据格式不正确，应为数组')
      }
    }).catch(error => {
      console.error('获取豆瓣电影数据失败：', error.message)
    })
  }
  
  // 添加类型
  const add_type = function () {
    // 使用 URLSearchParams 将数据转换为 application/x-www-form-urlencoded 格式
    const params = new URLSearchParams()
    params.append('code', type_item.code)
    params.append('name', type_item.name)
  
    const url = 'http://127.0.0.1:8000/api/add_type'
    axios.post(url, params, {
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
    }).then(res => {
      console.log('添加类型成功：', res.data)
      // 显示 Toast
      const toast = new Toast(document.getElementById('successToast'))
      toast.show()
      // 清空表单
      type_item.code = ''
      type_item.name = ''
    }).catch(error => {
      console.error('添加类型失败：', error.message)
    })
  }
  
  // 根据 n 查询电影标题
  const query_movies_by_n = function () {
    if (!query_n.value) {
      alert('请输入 n 的值')
      return
    }
  
    const url = `http://127.0.0.1:8000/api/title?n=${query_n.value}`
    axios.get(url).then(res => {
      if (Array.isArray(res.data.data)) {
        titles_data.value = res.data.data
      } else {
        console.error('返回的数据格式不正确，应为数组')
      }
    }).catch(error => {
      console.error('查询电影标题失败：', error.message)
    })
  }
  </script>
  
  <style>
  /* 全局天蓝色主题 */
  body {
    background-color: #e6f7ff; /* 浅蓝色背景 */
  }
  
  /* 毛玻璃效果 */
  .glass-card {
    background: rgba(255, 255, 255, 0.3); /* 半透明白色背景 */
    backdrop-filter: blur(10px); /* 毛玻璃效果 */
    border: 1px solid rgba(255, 255, 255, 0.2); /* 半透明边框 */
    border-radius: 10px; /* 圆角 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 动画效果 */
  }
  
  .glass-card:hover {
    transform: translateY(-5px); /* 悬停时上移 */
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* 悬停时阴影加深 */
  }
  
  /* 按钮样式 */
  .btn-primary, .btn-success, .btn-warning, .btn-info {
    border-radius: 20px; /* 圆角按钮 */
    padding: 10px 20px; /* 按钮内边距 */
    font-weight: bold; /* 加粗字体 */
    transition: background-color 0.3s ease, transform 0.3s ease; /* 动画效果 */
  }
  
  .btn-primary:hover, .btn-success:hover, .btn-warning:hover, .btn-info:hover {
    transform: scale(1.05); /* 悬停时放大 */
  }
  
  /* 表单输入框样式 */
  .form-control {
    border-radius: 20px; /* 圆角输入框 */
    border: 1px solid #ced4da; /* 边框颜色 */
    padding: 10px 15px; /* 内边距 */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* 动画效果 */
  }
  
  .form-control:focus {
    border-color: #80bdff; /* 聚焦时边框颜色 */
    box-shadow: 0 0 5px rgba(128, 189, 255, 0.5); /* 聚焦时阴影 */
  }
  </style>